<script setup>
import AnalysisItem from './AnalysisItem.vue';
import axios from 'axios';
import VuePdfEmbed from 'vue-pdf-embed';
import MarkdownIt from 'markdown-it';
import markdownItMath from 'markdown-it-math';
</script>

<template>
  <AnalysisItem @upload-click="handleUploadClick" :is-loaded="pdfState.isLoaded">
    <template #file-upload>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
        <polyline points="17 8 12 3 7 8"/>
        <line x1="12" y1="3" x2="12" y2="15"/>
      </svg>
    </template>
    <template #file-upload-tip>
      请上传文件
    </template>
    <template #file-text>
      <vue-pdf-embed :source="pdfState.pdfSource"/>
    </template>

    <template #dify>
      <div v-html="message" :key="message"></div>
    </template>
  </AnalysisItem>
</template>

<script>
export default {
  name: 'TheAnalysis',
  data() {
    return {
      message: '',
      fileId: '',
      fileContent: '',
      pdfState: {
        pdfSource: '',
        isLoaded: false,
      },
    }
  },
  
  mounted() {
    this.fetchData();
  },

  methods: {
    // 获取数据
    fetchData() {
      axios.get(this.$url + '/api/analysis')
      .then(response => {
        this.message = response.data.message
        if (response.data.fileId) {
          console.log('文件已上传')
          this.pdfState.isLoaded = true
          this.fileId = response.data.fileId
          this.fileContent = response.data.fileContent

          const binaryString = atob(this.fileContent)
          const uint8Array = new Uint8Array(binaryString.length);
          for (let i = 0; i < binaryString.length; i++) {
              uint8Array[i] = binaryString.charCodeAt(i);
          }

          // console.log(response.data.message)

          this.pdfState.pdfSource = `data:application/pdf;base64,${this.fileContent}`
          const md = new MarkdownIt();
          let message = md.render(response.data.message)
          this.message = message
        }
        else {
          console.log('请上传文件')
        }
      })
    },

    // 上传文件按钮事件
    handleUploadClick() {
      const input = document.createElement('input')
      input.type = 'file'
      input.accept = '.txt,.pdf,.doc,.docx'
      input.onchange = (event) => {
        this.handleFileChange(event)
      }
      input.click()
    },
    // 上传文件成功事件
    handleFileChange(event) {
      console.log('文件上传成功')
      const file = event.target.files[0]
      let formData = new FormData()
      formData.append('files', file)
      console.log(file)

      this.pdfState.pdfSource = URL.createObjectURL(file)
      console.log(this.pdfState.pdfSource)
      this.pdfState.isLoaded = true

      axios.post(this.$url + '/api/analysis/', formData, {
        headers: {
          'Content-Type':'multipart/form-data'
        }
      })
      .then(response => {
        const md = new MarkdownIt()
        md.use(markdownItMath, {
          inlineOpen: '\\(',
          inlineClose: '\\)',
          blockOpen: '\\[',
          blockClose: '\\]'
        })
        let message = md.render(response.data.message)
        console.log(message)
        this.message = message
        this.fileId = response.data.file_id
        // 运行工作流
        axios.get(this.$url + '/api/analysis?file_id=' + this.fileId)
        .then(response => {
            const md = new MarkdownIt();
            let message = md.render(response.data.message)
            this.message = message
        })
      })
    }
  },
}

</script>